<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="原始报文" prop="msg">
        <el-input
          v-model="queryParams.msg"
          placeholder="请输入原始报文"
          clearable
          size="small"
          style="width: 740px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div>
      <el-descriptions v-if="showDescription" title="解析信息(结果仅供参考，具体以数据解析为准)" border>
        <el-descriptions-item v-for="(item) in descriptions" :label="item.label">{{item.value}}
        </el-descriptions-item>
      </el-descriptions>
    </div>


  </div>
</template>

<script>
  import {
    analysisMsg,
  } from "@/api/tool/analysis";

  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          msg: undefined,
        },
        descriptions: [],
        showDescription: false
      };
    },
    created() {
    },
    methods: {
      /** 查询分页列表 */
      handleQuery() {
        this.loading = true;
        analysisMsg(this.queryParams.msg).then(response => {
          this.descriptions = response.data;
          this.loading = false;
          this.showDescription = true;
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.showDescription = false;
      },
    }
  };
</script>


